<template>
	<view class="my" style="padding-top: 20rpx;">
		<view class="bg">

		</view>
		<view class="border">

		</view>
		<view class="header">
			<view class="top" @click="chooseAddress">
				<image src="../../static/img/tip2.png" mode="widthFix"></image>
				<view class="detial" v-if="chooseItem.id">
					<view class="area" style="font-weight: 600;font-size: 34rpx;">
						<view class="">
							{{chooseItem.province}}/{{chooseItem.city}}/{{chooseItem.area}} {{chooseItem.detail}}
						</view>
					</view>
					<view class="" style="color: #7F7F7F;font-size: 26rpx;margin-top: 20rpx;">
						{{chooseItem.username}} | {{chooseItem.mobile}}
					</view>
				</view>
				<view v-if="!chooseItem.id">
					选择我的地址
				</view>

			</view>
			<view class="items" style="padding-top: 1rpx;">
				<view class="title"
					style="color: #3E5170;margin: 30rpx;margin-bottom: 0;display: flex;align-items: center;">
					<image src="../../static/img/tip1.png" mode=""
						style="width: 30rpx;margin-right: 10rpx;height: 30rpx;">
					</image>
					{{shopName}}
				</view>
				<view class="item">
					<image :src="'https://ba.fuliaoxx.com'+info.image" mode="" mode="good"></image>
					<view class="detail">
						<view class="name" style="display: flex;align-items: center;">
							{{info.name}}
						</view>
						<view class=""
							style="color: #3E5170;background-color: #F7F6F6;width: 140rpx;text-align: center;padding: 10rpx 0;font-size: 24rpx;border-radius: 8rpx;">
							数量：{{num}}
						</view>
						<view class="num">
							<view class="" style="color: #FC5D2B;font-weight: 600;font-size: 32rpx;">
								￥{{info.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mask-box">
				<view class="" style="margin-bottom: 30rpx;">
					服务方式
				</view>
				<view class="">
					<u-radio-group v-model="check">
						<u-radio activeColor="#75D65E" label="到店" :name="1"></u-radio>
						<view class="" style="width: 40rpx;">

						</view>
						<u-radio activeColor="#75D65E" label="预约上门" :name="2"></u-radio>
					</u-radio-group>
				</view>
				<view class="" style="margin-top: 30rpx;">
					预约时间

				</view>

				<view class="" style="margin-top: 30rpx;">
					备注
				</view>
				<u--textarea border="none" placeholder="请输入备注内容" v-model="mask"></u--textarea>
			</view>
		</view>
		<view class="footer">
			<view class="num" style="color: #3E5170;">
				实付款:
				<text style="color: #FF4E31;font-size: 38rpx;font-weight: 600;">￥{{totalPrice}}</text>
			</view>
			<view class="btn" @click="buy">
				提交订单
			</view>
		</view>
		<u-popup :show="show" @close="show=false">
			<view class="box" style="position: relative;">
				<view style="height: calc(100% - 150rpx);overflow: auto;">
					<view class="item2" v-for="(item,index) in lists" :key="index" @click.stop="choose(item)">
						<view class="icon" v-if="chooseItem.id==item.id">
							<u-icon name="checkbox-mark" color="#75D65E" size="24"></u-icon>
						</view>
						<view style="display: flex;align-items: center;">
							<text v-if="item.is_default"
								style="padding: 4rpx 10rpx;color: white;background-color: #75D65E;margin-right: 10rpx;border-radius: 10rpx;">默认</text>
							{{item.province}}/{{item.city}}/{{item.area}}/{{item.detail}}
						</view>
						<view class="">
						</view>
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view>
								<text>{{item.username}}</text>
								<text>{{item.mobile}}</text>
							</view>
							<view style="display: flex;align-items: center;">
								<view @click.stop="edit(item)" style="margin-right: 12rpx;">
									<u-icon name="edit-pen" color="#9e9e9e" size="20"></u-icon>
								</view>
								<view class="" @click.stop="delAdd(item.id)">
									<u-icon name="trash" color="#9e9e9e" size="20"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn-box">
					<view class="btn" @click="add">
						新增上门地址
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		list1,
		list,
		getType,
		createOrder
	} from "@/request/api/goods.js"
	import {
		list3,
		del
	} from "@/request/api/address.js"
	export default {
		data() {
			return {
				// fileList: [],
				// car: [],
				show: false,
				lists: [],
				mask: "",
				check: 1,
				info: {

				},
				shopName: "",
				totalPrice: 0,
				num: 0,
				chooseItem: {
					id: null
				}
			}
		},
		async onShow() {
			this.chooseItem = {
				id: null
			}
			let res = await list3();
			this.lists = res.data;
		},

		onLoad(opt) {
			this.info = JSON.parse(opt.item);
			this.num = opt.num;
			this.shopName = opt.shopName;
			this.totalPrice = this.info.price * this.num;

		},
		methods: {
			async buy() {
				if (!this.chooseItem.id) {
					uni.showToast({
						icon: "none",
						title: "请选择上门地址"
					})
					return
				}
				let params = {
					goods_id: this.info.id,
					address_id: this.chooseItem.id,
					service: this.check,
					num: this.num,
					remark: this.mask
				}

				let res = await createOrder(params);
				console.log(res)
				if (res.code == 1) {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res) {
							uni.reLaunch({
								url: "/pages/myOrders/myOrders"
							})
						},
						fail: function(err) {
							console.log(err);
						}
					})

				}
			},
			add() {
				uni.navigateTo({
					url: "/pages/addressAdd/addressAdd"
				})
			},
			choose(item) {
				this.chooseItem = item;
			},
			async delAdd(id) {
				await del(id)
				if (this.chooseItem.id == id) {
					this.chooseItem = {}
					return
				}
				let res = await list();
				this.lists = res.data.data;
			},
			edit(item) {
				uni.navigateTo({
					url: "/pages/addressAdd/addressEdit?item=" + JSON.stringify(item)
				})
			},
			chooseAddress() {
				if (this.lists.length == 0) {
					uni.navigateTo({
						url: "/pages/addressAdd/addressAdd"
					})
					return
				}
				this.show = true;
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F0F3F7;
	}
</style>
<style scoped lang="scss">
	/deep/ .line {
		input {
			text-align: right !important;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		background-color: white;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 30rpx;

		.num {
			display: flex;
			align-items: center;
			flex: 2;
			display: flex;
			padding-left: 30rpx;
			font-size: 26rpx;
		}

		.btn {
			width: 240rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to right, #75D65E, #75D65E);
			padding: 20rpx 0;
			border-radius: 100px;
		}
	}

	.my {
		height: 100%;
		box-sizing: border-box;

		.bg {
			position: fixed;
			width: 100%;
			height: 180rpx;
			top: 0;
		}

		.border {
			position: fixed;
			width: 100%;
			background-color: #F8F8F8;
			height: 80rpx;
			top: 120rpx;
			z-index: 1;
			border-radius: 50rpx 50rpx 0 0;
		}

		.header {
			position: relative;
			z-index: 1;
			margin: 0 30rpx;
			box-sizing: border-box;
			height: calc(100% - 200rpx);


			image {
				width: 40rpx;
				margin-right: 16rpx;
			}

			.top {
				position: relative;
				border-radius: 30rpx;
				background-color: white;
				padding: 30rpx;

				display: flex;
				align-items: center;


				.detial {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.area {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						.tip {
							background-color: #FBDB0C;
							padding: 6rpx 10rpx;
							margin-right: 20rpx;
							border-radius: 10rpx;
						}
					}
				}
			}

			.mask-box {
				margin-top: 20rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				background-color: white;
				box-sizing: border-box;
			}

			.items {
				margin-top: 20rpx;
				border-radius: 30rpx;
				background-color: white;
				box-sizing: border-box;

				.item {
					display: flex;
					padding: 30rpx;

					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.detail {
						height: 180rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
						padding: 6rpx 0;
						box-sizing: border-box;

						.num {
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
			}

			.mask-box {}


		}



	}

	.box {
		overflow: auto;
		height: 700rpx;
	}

	.item2 {
		padding: 20rpx;
		border-bottom: 1rpx solid #dedede;
		position: relative;
		font-size: 24rpx;

		.icon {
			position: absolute;
			right: 20rpx;
			top: 20%;
			color: #75D65E;
			font-size: 30rpx;
		}
	}

	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		.btn {
			margin: 30rpx;
			margin-top: 100rpx;
			background: linear-gradient(to right, #75D65E, #75D65E);
			color: white;
			border-radius: 50px;
			text-align: center;
			padding: 24rpx 0;
			font-size: 32rpx;
		}
	}
</style>